<script setup lang="ts">
import { ref, watch } from "vue";
import dayjs, { Dayjs } from "dayjs";
const dateFormat = "YYYY-MM-DD HH:mm:ss";
const disabled = ref<boolean>(false);
const silderMax = ref(0);
const silderval = ref(0);
const timeval: any = ref<[Dayjs, Dayjs]>([
  dayjs("2015-01-01 00:00:00", dateFormat),
  dayjs("2015-05-01 23:59:59", dateFormat),
]);
let start = dayjs(timeval.value[0], dateFormat).format("YYYY-MM-DD HH:mm:ss");
let end = dayjs(timeval.value[1], dateFormat).format("YYYY-MM-DD HH:mm:ss");

// 计算小时
const getHour = (time1: any, time2: any) => {
  const date1 = new Date(time1);
  const date2 = new Date(time2);

  const diff = Math.abs(date1.getTime() - date2.getTime());

  return Math.floor(diff / (1000 * 60 * 60));
};
// 计算选择的日期
const getAdjustedTime = (time: any, hours: any) => {
  let date = new Date(time);
  date.setHours(date.getHours() + hours);
  //   date.setMinutes(date.getMinutes() + minutes);
  //   date.setDate(date.getDate() + days);
  return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
};
silderMax.value = getHour(start, end);
const newtimes = ref(start);
// watch(
//   () => silderval.value,
//   (val: any) => {
//     console.log(val);

//
//   }
// );
const handleChange = (e: any) => {
  console.log(e);
};
const formatter = (val: number) => {
  newtimes.value = getAdjustedTime(start, val);
  return newtimes.value;
};
</script>

<template>
  <div class="code-box">
    <div class="public-flex-box">
      <div class="public-title-bold">根据时间选择渲染滑块</div>
      <a-range-picker
        v-model:value="timeval"
        :format="dateFormat"
        @change="handleChange"
      />
      <div class="silder-box">
        <a-row :gutter="24">
          <a-col :span="22">
            <a-slider
              id="test"
              v-model:value="silderval"
              :disabled="disabled"
              :max="silderMax"
              :tip-formatter="formatter"
            /> </a-col
          ><a-col :span="2">
            <div>{{ silderval }}/{{ silderMax }}</div></a-col
          ></a-row
        >
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.ant-slider {
  height: 20px;
}
.ant-slider-rail {
  // display: flex;
  border-radius: 7px;
  height: 8px;
}
.ant-slider-handle {
  position: absolute;
  width: 24px;
  height: 24px;
  margin-top: -9px;
  background-color: #fff;
  border: solid 6px #3789fd;
  border-radius: 50%;
}
.ant-slider:hover .ant-slider-track {
  background-color: #3789fd;
}
.ant-slider-track {
  height: 8px;
  background-color: #3789fd;
}
.ant-slider:hover .ant-slider-handle:not(.ant-tooltip-open) {
  border-color: #3789fd;
}
.ant-slider-handle:focus {
  border-color: #3789fd;
}
.ant-tooltip-inner{
    background: #fff !important;
    color: rgba(0, 0, 0, 0.65) !important;
    border-radius: 8px;
}
.ant-tooltip-arrow-content{
    background: #fff !important;
}
</style>
